<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>03过滤watch</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>人员列表</h1>
        <input type="text" v-model="MyList ">
        <ul>
            <li v-for="l in Libiao2" :key='index' >
                {{l.name}} - {{l.age}} - {{l.gender}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                MyList:'',
                Libiao:[
                {name:'马冬梅',age:19,gender:'女'},
                {name:'周冬雨',age:18,gender:'女'},
                {name:'邓超',age:22,gender:'男'},
                {name:'邓伦',age:18,gender:'男'},
                ],
                Libiao2:[]
            },
            methods: {},
            computed: {},
            watch: {
                MyList:{
					immediate:true,

                   handler(val){
                    const renming = this.Libiao.filter((Libiao)=>{
                        return Libiao.name.indexOf(val) !== -1
                    })
                    this.Libiao2 = renming
                }
             }
            }
        })
    
    </script>
</body>

</html>